<template>
    <div class="column" @contextmenu.prevent='rightclick(item)' @mouseleave ='onmouseover'>
        <el-tag :type="item.status == '00'?'success':item.status == '01'?'warning':item.status == '02'?'':item.status == '05'?'danger':item.status == '04'?'success':item.status == '06'?'warning':'warning'" class="column-more-status" v-if="item.docType=='05'">{{item.status|statusfilters}}</el-tag>
        <div class="column-more" v-if="listQuery.isUpdate != 1">
            <folderPopover  v-if="item.type == 'doc'" :documentType="documentType" :functionIndex="functionIndex" :treeData="item" :listQuery="listQuery"></folderPopover>
            <folderPopoverTWO ref="folderPopover" v-if="item.type == 'doc'" :documentType="documentType" :functionIndex="functionIndex" :treeData="item" :listQuery="listQuery"></folderPopoverTWO>
        </div>
        <div class="column-img" @click="documentClick(item)" @contextmenu.prevent='rightclick(item)'>
            <el-image v-if="item.type == 'dir'" style="width: 100%;height: 100%;" :src="folderImg"></el-image>
            <el-image v-if="item.type == 'doc'" style="width: 100%;height: 100%;" :src="fileImg"></el-image>
        </div>
        <span class="column-title" @click="documentClick(item)"  @contextmenu.prevent='rightclick(item)'>{{item.name}}</span>
    </div>
</template>

<script>
import folderPopover from "./folderPopover.vue"
import folderPopoverTWO from "./folderPopoverTWo.vue"
export default {
    data() {
        return {
            folderImg:require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
            fileImg:require("../../../../img/140a48decfb0a656a23a22e2cbb6bee8.svg"),
            filePdfImg:require("../../../../img/1a69b207d1bac0dc2f5ae970b86580c2.svg"),
        };
    },
    filters: {
        statusfilters(val) {
            if (val == "00") {
                return "已上传";
            } else if (val == "01") {
                return "待审批";
            } else if (val == "02") {
                return "审批中";
            } else if (val == "05") {
                return "已驳回";
            } else if (val == "04") {
                return "已审批";
            } else if (val == "06") {
                return "已过期";
            } else if (val == "07") {
                return "已作废";
            }
        },
    },
    components: {
        folderPopover,folderPopoverTWO
    },
    props: ["item", "listQuery", "functionIndex", "documentType"],
    methods: {
        leftclick(){
            console.log('1');
        },
        rightclick(item){
            if(item.type=='doc'){
                 console.log(this.item);
                 this.$refs.folderPopover.visibletypechang()
             }
        },
        onmouseover(){
            if(this.item.type=='doc'){
                this.$refs.folderPopover.visibletypechangonmouseover()
            }
        },
        // 预览文档
        documentClick(item) {
            // console.log(item)
            var _this = this;
            if (item.type == "dir") {
                this.$emit("dirClick", item);
                // window.open(item.filePath, '_system') //url为访问的地址
            } else {
                // window.open('https://view.officeapps.live.com/op/view.aspx?src=' + item.filePath)
                if (item.docType == "05") {
                    var data = {
                        docType: item.docType,
                        dirId: item.dirId,
                        docId: item.docId,
                    };
                    this.$router.push({
                        path: "/contract/details",
                        query: { data: JSON.stringify(data) },
                    });
                } else if (item.docType == "04") {
                    var data = {
                        docType: item.docType,
                        dirId: item.dirId,
                        docId: item.docId,
                    };
                    this.$router.push({
                        path: "/document/details",
                        query: { data: JSON.stringify(data) },
                    });
                }else{
                    // window.open('https://view.officeapps.live.com/op/view.aspx?src=' + item.docFilePath[0].fileUrl)
                    // window.open(item.docFilePath[0].fileUrl, "_blank");
                }
            }
        },
        // documentClick(item){
        //   // console.log(item)
        // 	var _this = this
        // 	if(item.type == 'dir'){
        // 	  this.$emit('dirClick',item)
        // 		// window.open(item.filePath, '_system') //url为访问的地址
        // 	}else{
        // 		window.open('https://view.officeapps.live.com/op/view.aspx?src=' + item.filePath)
        // 	}
        // },
    },
};
</script>

<style scoped>
.column {
    position: relative;
    /* width: 160px;
    height: 185px; */
    width: 130px;
    height: 163px;
    border: 1px solid #e3e9ed;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.column:hover{
    background-color: rgb(236,245,255)
}
.column-more {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 12px;
}
.column-more-status {
    position: absolute;
    left: 6px;
    top: 6px;
}

.column-img {
    width: 70px;
    height: 70px;
    cursor: pointer;
}

.column-title {
    padding: 0 10px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2e405e;
    font-size: 12px;
    margin-top: 12px;
    text-align: center;
    cursor: pointer;
}

.column-title:hover {
    color: #2c7ef8;
}
</style>
